<template>
    <el-form-item>
        <el-button @click="onSubmit">保存</el-button>
    </el-form-item>
    <h2 style="margin-left: 400px;">联系记录表单</h2>
    <table class="order-table">
        <tr>
            <th colspan="6" style="text-align: left;">基本信息</th>
        </tr>
        <tr>
            <td>联系日期：</td>
            <td>
                <el-date-picker v-model="form.contactDate" type="date" placeholder="Pick a date" style="width: 100%" />
            </td>
            <td>联系时间：</td>
            <td>
                <el-date-picker v-model="form.contactHours" type="date" placeholder="Pick a date" style="width: 100%" />
            </td>
        </tr>
        <tr>
            <td>联系人姓名：</td>
            <td>
                <el-select v-model="form.contactName" placeholder="请选择联系人姓名">
                    <el-option label="张司影" value="张司影" />
                    <el-option label="韩一芳" value="韩一芳" />
                    <el-option label="刘志宝" value="刘志宝" />
                    <el-option label="申莹洋" value="申莹洋" />
                    <el-option label="周岚青" value="周岚青" />
                    <el-option label="徐如华" value="徐如华" />
                    <el-option label="张淑馨" value="张淑馨" />
                    <el-option label="郭银汝" value="郭银汝" />
                    <el-option label="屈语盼" value="屈语盼" />
                    <el-option label="柳泳辉" value="柳泳辉" />
                </el-select>
            </td>
            <td>联系人电话：</td>
            <td><el-input v-model="form.contactPhone" placeholder="请输入联系人电话"/></td>
        </tr>
        <tr>
            <td>联系人邮箱：</td>
            <td><el-input v-model="form.contactEmail" placeholder="请输入联系人邮箱"/></td>
            <td>联系渠道：</td>
            <td>
                <el-select v-model="form.contactChannels" placeholder="请选择联系渠道">
                    <el-option label="电脑沟通" value="电脑沟通" />
                    <el-option label="邮箱沟通" value="邮箱沟通" />
                    <el-option label="微信沟通" value="微信沟通" />
                    <el-option label="QQ沟通" value="QQ沟通" />
                    <el-option label="短信沟通" value="短信沟通" />
                    <el-option label="线下活动" value="线下活动" />
                    <el-option label="面对面沟通" value="面对面沟通" />
                </el-select>
            </td>
        </tr>
        <tr>
            <td>联系主题：</td>
            <td><el-input v-model="form.contactSubject" placeholder="请输入联系主题"/></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>联系内容：</td>
            <td colspan="3"><el-input v-model="form.contactContent" type="textarea" placeholder="请输入联系内容"/></td>
        </tr>
        <tr>
            <td>备注：</td>
            <td colspan="3"><el-input v-model="form.remark" type="textarea" placeholder="请输入备注"/></td>
        </tr>
    </table>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, watch } from 'vue' // 确保引入了 watch
import dayjs from 'dayjs'
import { useCounterStore } from "@/stores/counter";
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import {read,write} from '@/axios/axiosHelper'

const router = useRouter()
const route = useRoute()

const store = useCounterStore();

// do not use same name with ref
const form = reactive({
    contactDate: '',
    contactHours: '',
    contactName: '',
    contactPhone: '',
    contactEmail: '',
    contactChannels: '',
    contactSubject: '',
    contactContent: '',
    remark: ''
});

const onSubmit = () => {
    write.post("/f-write/api/Contact/CreateContact", form)
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.msg)
                router.push('/QueryContect')
            }
            else {
                ElMessage.error(res.data.msg)
                return;
            }
        })
}
</script>

<style scoped>
.order-table {
    border-collapse: collapse;
    width: 100%;
}

.order-table th,
.order-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

.order-table th {
    background-color: #f2f2f2;
}
</style>

<style scoped>
#app {
    padding: 20px;
}
</style>